<div *ngIf="chatRoom; else no_chatrooms_selected">
  <!-- Header -->
  <div style="height: 125px">
    <span
      style="
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      "
    >
      <h2>{{ chatRoom.name }}</h2>
      <span style="display: flex; flex-direction: row; align-items: center">
        <mat-icon>event</mat-icon>
        <p style="margin-left: 10px">{{ chatRoom.updated_at | date }}</p>
      </span>
    </span>
    <span>
      <h3 style="color: gray">{{ chatRoom.description }}</h3>
      <span *ngFor="let user of chatRoom.users">{{ user.username }},</span>
    </span>
  </div>
</div>

<!-- Messages -->
<div #messages class="message">
  <span *ngFor="let message of (messagesPaginate$ | async)?.items">
    <app-chat-message [message]="message"></app-chat-message>
  </span>
</div>

<!-- Add Message -->
<div
  style="
    position: absolute;
    bottom: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
  "
>
  <mat-form-field style="width: 350px">
    <input matInput [formControl]="chatMessage" typt="text" />
  </mat-form-field>
  <button mat-button [disabled]="!chatMessage.valid" (click)="sendMessage()">
    <span style="display: flex; flex-direction: row; align-items: center">
      <mat-icon style="margin-left: 20px">send</mat-icon>
      <p style="margin-left: 10px">Send</p>
    </span>
  </button>
</div>

<ng-template #no_chatrooms_selected>
  <mat-error>没有会话窗口</mat-error>
</ng-template>
